<%--
  Created by IntelliJ IDEA.
  User: zy136
  Date: 2023/11/11
  Time: 20:25
  To change this template use File | Settings | File Templates.
--%>
<%@ include file="../common/top.jsp"%>
<script  src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.2.1/jquery.min.js"></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
  var InterValObj; //timer变量，控制时间
  var count = 60; //间隔函数，1秒执行
  var curCount;//当前剩余秒数
  function sendMessage() {
    curCount = count;
    $("#btn").attr("disabled", "true");
    $("#btn").val(curCount + "seconds");
    InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次请求后台发送验证码
  }
  //timer处理函数
  function SetRemainTime() {
    if (curCount == 0) {
      window.clearInterval(InterValObj);//停止计时器
      $("#btn").removeAttr("disabled");//启用按钮
      $("#btn").val("send again");
    } else {
      curCount--;
      $("#btn").val(curCount + "seconds");
    }
  }
</script>

<div id="Catalog">
  <form  action="SignOnByPhone" method="post">
    <p>Please enter your PhoneNumber.</p>
    <c:if test="${requestScope.signOnMsg != null}">
      <p> <font color="red">${requestScope.signOnMsg} </font> </p>
    </c:if>
    <p>
      PhoneNumber:<input type="text" name="phone" id="phone"><br/>
      VerificationCode:<input type="text" name="code" id="code">
      <input
              type="button" id="btn" name="btn" value="send code"
              onclick="sendMessage()" />
    </p>
    <input type="button" value="Login" id="lo">
  </form>
  Need a username and password?
  <a href="signonForm">Login By Username and Password</a><br/>
  <a href="registerForm">Register Now!</a>

</div>

<script type="text/javascript">
  var sms = "";
  $("#btn").click(function() {
    var phone = $("#phone").val();
    if (phone != "") {
      $.ajax({
        url : "sendSMS",  //发送请求
        type : "post",
        data : {
          "phone" : phone
        },
        success : function(result) {
          sms = result;
        }
      });
    } else {
      alert("please enter your phone number");
      return false;
    }
  });

  $("#lo").click(function() {
    var code = $("#code").val();
    if (code == "") {
      alert("please enter the code");
    } else {
      if (sms == code) {
        $("#Catalog form").submit();
      } else {
        alert("incorrect code");
      }
      ;
    }
    ;
  });


</script>
<%@ include file="../common/bottom.jsp"%>
